<template>
  <DropdownCustom :toggle-icon="false" class-name="h-text-dropdown" placement="bottom-end">
    <span class="text-hover blue-color  ml-10px">
      <i class="fi fi-link"></i>
    </span>
    <template #content>
      <div class="w-400px">
        <div class="p-8px flex justify-between items-center bg-gray3-color">
          <span>附件列表</span>
          <Uploader :showFileList="false" :accept="accept" displayType="file" multiple v-model="billList" :option="billUploaderOptions">
            <template #button>
               <span class="text-hover">
                 <i class="fa fa-upload"></i> 点击上传
               </span>
            </template>
          </Uploader>
        </div>
        <div class="h-150px">
          <vxe-table ref="billListTable" :data="billList" :show-header="false" height="auto">
            <vxe-column field="name">
              <template #default="{row}">
                <a :href="'/api'+row.url+'?name='+row.name" target="_blank">
                  {{ row.name }}
                </a>
              </template>
            </vxe-column>
            <vxe-column width="40" align="center">
              <template #default="{row,rowIndex}">
                <i class="fa fa-trash text-hover" @click.stop="rmBill(row,rowIndex)"></i>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </div>
    </template>
  </DropdownCustom>
</template>

<script>
import {message} from "heyui.ext";
// import Common from "@api/common";

/**
 * <p>****************************************************************************</p>
 * <p><b>Copyright © 2010-2023 纷析云（杭州）技有限公司 All Rights Reserved<b></p>
 * <ul style="margin:15px;">
 * <li>Description : </li>
 * <li>Version     : 1.0</li>
 * <li>Creation    : 2023年09月28日</li>
 * <li>@author     : ____′↘夏悸</li>
 * </ul>
 * <p>****************************************************************************</p>
 */
export default {
  name: "Attachment",
  props: {
    modelValue: [Array],
    type: {
      type: String,
      default: 'voucher'
    },
  },
  emits: ['update:modelValue', 'update:receiptNum'],
  data() {
    return {
      billList: [],
      billUploaderOptions: {
        onBeforeUpload: (file) => {
          if (!(this.acceptList.includes(file.type) || file.type.startsWith("image/"))) {
            message.error(`${file.name} 文件是不支持的上传类型~`);
            return false;
          }
          if (file.size > 100 * 1024 * 1024 * 1024) {
            message.error(`${file.name} 文件大小超出100M限制`);
            return false;
          }
          return true;
        },
        // onChange: async (file) => {
        //   try {
        //     const fd = new FormData();
        //     fd.append("file", file);
        //     const {data, success, msg} = await Common.upload(this.type, fd);
        //     if (success) {
        //       this.$emit('update:receiptNum', this.billList.length + 1);
        //       return data.path;
        //     } else {
        //       message.error(msg);
        //       throw new Error(msg);
        //     }
        //   } catch (error) {
        //     console.error(error)
        //     message.error(`${file.name}上传失败`);
        //     throw new Error();
        //   }
        // }
      },
      accept: "application/x-zip-compressed,application/zip,image/*,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/pdf,text/plain,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
    }
  },
  computed: {
    acceptList() {
      return this.accept.split(",");
    }
  },
  watch: {
    billList(val) {
      this.$emit('update:modelValue', val)
    },
    modelValue(val) {
      if (val) {
        this.billList = val;
      }
    }
  },
  methods: {
    rmBill(row, rowIndex) {
      this.billList.splice(rowIndex, 1);
      this.$refs.billListTable.remove(row);
      this.$emit('update:modelValue', this.billList)
      message.success("已移除，保存后生效~")
    }
  },
  created() {
    if (this.modelValue) {
      this.billList = this.modelValue;
    }
  },
}
</script>
